<script setup lang="ts">
definePageConfig({
  navigationBarTitleText: '身份信息认证'
});

import { ref, computed } from 'vue';
import { useRouterPush } from '@/composables';
import { useAuthStore } from '@/store';
import { storeToRefs } from 'pinia';
// import { useImage } from '@/hooks';

const { nurseUser } = storeToRefs(useAuthStore());
// nurseUser

const {
  toIdCardVerify,
  toPhoneVerify,
  toFaceVerify,
  toHealthCodeVerify
} = useRouterPush();

// 定义认证状态映射
// const verificationStatusMap = computed(() => ({
//   idCard: nurseUser.value.idcard && nurseUser.value.isVerified == '1',
//   phone: nurseUser.value.phone && nurseUser.value.isPhone == '1',
//   face: nurseUser.value.face,
//   healthCode: nurseUser.value.healthCode
// }));

// 认证菜单项配置
const verifyItems = [
  {
    id: 'idCard',
    text: '身份证认证',
    icon: 'i-local-id-card',
    to: () => toIdCardVerify(),
    hasVerified: () => {
      return nurseUser.value.isVerified == '1'
    },
    getStatus: () => {
      if(nurseUser.value.isVerified == '1') {
        return "已验证"
      }
      if(nurseUser.value.idcard) {
        return "已填写"
      }
      return "去验证"
    }
  }
  
  // {
  //   id: 'phone',
  //   text: '手机号认证',
  //   icon: 'i-local-phone',
  //   to: () => toPhoneVerify(),
  //   hasVerified: () => {
  //     return nurseUser.value.isPhone == '1'
  //   },
  //   getStatus: () => {
  //     if(nurseUser.value.isPhone == '1') {
  //       return "已验证"
  //     }
  //     if(nurseUser.value.phone) {
  //       return "已填写"
  //     }
  //     return "去验证"
  //   }
  // },
  // {
  //   id: 'face',
  //   text: '人脸认证',
  //   icon: 'i-local-face-id',
  //   to: () => toFaceVerify(),
  //   getStatus: () => verificationStatusMap.value.face
  // },
  // {
  //   id: 'healthCode',
  //   text: '健康码认证',
  //   icon: 'i-local-health-code',
  //   to: () => toHealthCodeVerify(),
  //   getStatus: () => verificationStatusMap.value.healthCode
  // }
];

// 格式化图标类
//const Icon = computed(() => (_icon: string) => `${_icon} w-36px h-36px`);
</script>

<template>
  <basic-layout>
    <view class="w-375px text-primary flex-col-center justify-start">
      <!-- 用户信息头部 -->
      <view class="w-375px justify-between flex-center h-80px bg-gradient-to-r from-blue-400 to-purple-600">
        <view class="text-white/80 ml-4">
            {{ '身份认证' }}
        </view>
        <!-- <view class="text-white/80 mr-4">
            1/4
        </view> -->
      </view>

      <!-- 认证进度条 -->
      <!-- <view class="w-350px bg-white mt-3 p-3 rounded-lg shadow">
        <view class="flex justify-between items-center mb-2">
          <text class="font-medium">认证进度</text>
        </view>
        <view class="w-full bg-gray-200 rounded-full h-2.5">
        </view>
      </view> -->

      <!-- 认证菜单列表 -->
      <view class="w-350px bg-white mt-3 rounded-lg shadow px-2">
        <view v-for="item in verifyItems" class="flex h-60px w-auto flex-col-center b-b-solid b-b-1 border-[#eee]">
          <view class="flex-center w-full h-full" @click="item.to" :class="{'hass': item.hasVerified()}">
            <view class="w-5/6 h-full flex justify-start items-center">
              <!-- <view class="ml-2">
              </view> -->
              <view class="ml-2 flex-col-center items-start text-lg">
                {{ item.text }}
              </view>
            </view>
            <view class="ml-auto h-full flex-center justify-end text-green-500 btnss">
              <view class="text-sm flex items-center truncate">
                {{ item.getStatus() }}
              </view>
              <view class="i-local-right-bold w-24px h-24px ml-2"></view>
            </view>
          </view>
          <!-- <view v-if="item !== verifyItems[verifyItems.length - 1]" class="w-340px b-b-solid b-b-1"></view> -->
        </view>
      </view>

      <!-- 认证提示 -->
      <view class="w-350px mt-3 px-3 py-2 bg-blue-50 rounded-lg">
        <view class="flex items-start">
          <view class="i-local-info-circle text-blue-500 mt-0.5"></view>
          <view class="ml-2 text-sm text-blue-700">
            完成所有认证后可享受更多服务，保障您的账户安全。
          </view>
        </view>
      </view>
    </view>
  </basic-layout>
</template>  

<style lang="scss">
.hass {
  /*pointer-events: none;*/
  .btnss{
    opacity: 0.64;
  }
}
</style>